<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="故障类型">
        <el-input v-model="formInline.faultType" placeholder="故障类型"></el-input>
      </el-form-item>
      <el-form-item label="故障时间" prop="addTime">
        <el-date-picker
            v-model="dateTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
      </el-form-item>
    </el-form>
    <!--1.视图-->
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="faultId"
          label="序号"
          width="150">
      </el-table-column>
      <el-table-column
          prop="uname"
          label="用户"
          width="120">
      </el-table-column>
      <el-table-column
          prop="name"
          label="品牌"
          width="120">
      </el-table-column>
      <el-table-column
          prop="faultType"
          label="故障类型"
          width="120">
      </el-table-column>
      <el-table-column
          prop="faultDescription"
          label="详细说明"
          width="120">
      </el-table-column>
      <el-table-column
          prop="faultTime"
          label="故障发生时间"
          width="300">
      </el-table-column>
      <el-table-column
          prop="faultStatus"
          label="故障状态"
          width="120">
          <template slot-scope="s">
            <el-tag v-if="s.row.faultStatus==0">未处理</el-tag>
            <el-tag v-if="s.row.faultStatus==1">处理中</el-tag>
            <el-tag v-if="s.row.faultStatus==2">已解决</el-tag>
          </template>
      </el-table-column>
      <el-table-column
          prop="files"
          label="图片"
          width="120">
        <template v-slot="s">
          <el-image
          style="width: 100px;height: 100px"
          :src=s.row.files
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row.faultId)" type="text" size="small">修改</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @current-change="gopage"
        :page-size="size"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>
    <el-dialog title="修改" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="车辆" :label-width="formLabelWidth">
          <el-input v-model="form.vehiclesId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="故障类型" :label-width="formLabelWidth">
          <el-input v-model="form.faultType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="故障描述" :label-width="formLabelWidth">
          <el-input v-model="form.faultDescription" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="故障状态" :label-width="formLabelWidth">
          <el-radio-group v-model="form.status">
            <el-radio label="0" value="0">未处理</el-radio>
            <el-radio label="1" value="1">处理中</el-radio>
            <el-radio label="2" value="2">已解决</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="故障描述" :label-width="formLabelWidth">
          <el-input v-model="form.faultDescription" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图片" :label-width="formLabelWidth">
          <el-upload
              class="avatar-uploader"
              action="http://127.0.0.1:10020/fault/img"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
export default {
  name: "FaultView",
  data() {
    return {
      //2.属性定义
      tableData:[],
      size: 3,
      total: 0,
      current: 1,
      formInline:{},
      dialogFormVisible: false,
      form:{},
      imageUrl:'',
      dateTime:[],
      formLabelWidth: '100px',
      //3. 初始数据
    }
  }, methods: {

    //3.自定义函数
    list(){
      if(this.dateTime!=null){
        let dateLang=this.dateTime;
        this.formInline.starTime=dateLang[0];
        this.formInline.endTime=dateLang[1];
      }
      this.axios.post("/fault/list?current="+this.current+"&size="+this.size,this.formInline).then(res=>{
        this.tableData = res.data.data.list
        this.total = res.data.data.total
      })
    },
    gopage(current){
      this.current = current
      this.list();
    },
    openAdd(){

    },
    handleClick(){
      this.list1();
    this.dialogFormVisible=true;
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.files = res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    list1(){
      this.axios.get("/fault/list1").then(res=>{
         this.form=res.data.data
      })
    }

  }, created() {
    //4.钩子函数
    this.list();

  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
